import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)


// 路由懒加载不使用同步组件
// import Home from '../components/router/Home'
// import Mine from '../components/router/Mine'
// import Topic from '../components/router/Topic'

//异步
// let Home = () => {
//     return import ('../components/router/Home')
// }
// let Mine = () => {
//     return import ('../components/router/Mine')
// }
// let Topic = () => {
//     return import ('../components/router/Topic')
// }

// 2020-5-27上午
// export default new VueRouter({
//     // mode : 'history',//history模式
//     routes : [
//         {
//             path : '/',
//             // component : Home
//             // components //嵌套路由也可以有命名视图
//             components : {
//                 //视图名 ： 路由名
//                 default : Home,
//                 a : Mine,
//                 b : Topic
//             }
//         },
//         {
//             path : '/topic',
//             component : Topic,
//             //重定向和别名

//             //重定向
//             // redirect : '/mine'//字符串方式//根据路径重定向
//             // redirect : 'Mine'//根据名字重定向

//             // redirect : { //对象方式
//             //     // path : '/mine'//根据路径重定向
//             //     name : 'Mine',//根据名字重定向
//             //     query : {a : 1, b : 2},//重定向的时候也可以传查询条件
//             //     params : {c : 3}//重定向的时候也可以传参(传参必须通过命名路由)
//             // }

//             // redirect : (to) => {
//             //     //方法接收 目标路由 作为参数
//             //     //return 重定向的 字符串路径/路径对象
//             //     console.log(to)//目标路由的信息(topic)
//             //     return '/mine'
//             // }
//             //别名
//             //相当于小名 URL发生改变映射的组件不改变
//             // alias : "/xiaoming" //不管访问哪个路径都加载的是这个组件//嵌套路由也可以使用别名,但是不推荐


//             // H5  history模式
//             // vue-router默认使用的是hash模式使用 ---URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
//             // hash模式是利用锚点跳转的方式实现的
//             // 不利于搜索引擎的搜索

//             // history这种模式要玩好，还需要后台配置支持。
//         },
//         {   
//             path : '/mine/:userName',
//             component : Mine,
//             // components : { // ****对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
//             //     default : Mine,
//             //     a : Topic
//             // },
//             name : 'Mine',
//             // 使用 props 将组件和路由解耦：

//             //布尔模式
//             // props : true//如果 props 被设置为 true，route.params 将会被设置为组件属性。
//             // props : { // ****对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
//             //     default : true 
//             // }

//             // 对象模式
//             // 如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。
//             // props : { //当props是对象模式的时候,$route.params就不会被设置为组件属性//只会按这个样子设置为组件属性↓
//             //     gender : "nan"//值是死的
//             // }

//             //函数模式
//             // props : (route) => {
//             //     console.log(route)
//             //     // 将静态值与基于路由的值结合等等。
//             //     // 弊端：当页面刷新的时候静态值(gender)和查询条件(route.query.search)还存在,
//             //     // ****  但是路由参数(route.params.userName)会丢失
//             //     return { userName : route.params.userName, gender : 'nan' , search : route.query.search }
//             // }

//             //简写//箭头函数默认返回方式
//             //错误的语法
//             // props : (route) => {userName : route.params.userName, gender : 'nan' , search : route.query.search}
//             //正确的语法
//             // 小括号括起来告诉浏览器这是个整体
//             props : (route) => ({userName : route.params.userName, gender : 'nan' , search : route.query.search}),

//             // 路由元信息
//             meta : {//设置了才有，没设置没有
//                 isActive : true
//             },
//             redirect : (to) => {//如果路由元信息里的isActive===true跳转到根路由
//                 if(to.meta.isActive) {
//                     return '/'
//                 }
//             }
//         }
//     ]
// })

// 2020-5-27下午
// let router = new VueRouter({
//     routes: [
//         {
//             path: '/',
//             component: () => import ('../components/router/Home')//路由懒加载
//         },
//         {
//             path: '/mine',
//             component: () => import('../components/router/Mine'),//ES6语法
//             meta: {
//                 isActive: false
//             }
//         },
//         {
//             path: '/topic/:id',
//             component: (resolve) => require(['../components/router/Topic'],resolve),//nodejs语法
//             // 路由独享的守卫
//             // 你可以在路由配置上直接定义 beforeEnter 守卫：
//             beforeEnter: (to, from, next) => {
//                 console.log(to)
//                 console.log(from)
//                 console.log(next)
//                 next()//也必须调用
//             }
//         }
//     ]
// })


// 全局前置守卫
// 当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。
// router.beforeEach((to, from, next) => {
//     // console.log(to)//即将要进入的路由信息
//     // console.log(from)//离开的路由信息
//     // console.log(next)//进行管道中的下一个钩子
//     // next()//一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
//     // next(false)//中断当前的导航。

//     // next('/')//目标导航被中断//进入这个导航//死循环
// })

// 全局解析守卫
// 在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
// router.beforeResolve((to, from, next)=>{
//     // console.log(to)//↑上面的先执行
//     // console.log(from)
//     // console.log(next)
//     next()//如果同时注册了多个守卫，依然必须调用next方法
// })

// 全局后置钩子
// 这些钩子不会接受 next 函数也不会改变导航本身：
// router.afterEach((to, from) => {
//     console.log(to)
//     console.log(from)
// })

// 路由独享的守卫
// 你可以在路由配置上直接定义 beforeEnter 守卫：

// 组件内的守卫


//执行顺序
//先执行全局的，再执行路由独享的，最后执行组件内的

// router.beforeEach((to, from, next) => { 
//     if(to.meta.isActive === false) {//根据判断路由元信息选择进入哪个路由
//         next('/')
//     } else {
//         next()
//     }
// })

// 路由懒加载
// 结合 Vue 的异步组件 和 Webpack 的代码分割功能 ，轻松实现路由组件的懒加载。


// export default router

// 2020-5-27晚上
let router = new VueRouter({
    routes : [
        {
            path : "/",
            component : ()=>import('../components/router/Home'),
            name : 'Home'
        },
        {
            path : "/mine",
            component : ()=>import('../components/router/Mine'),
            name : 'Mine'
        },
        {
            path : "/topic",
            component : ()=>import('../components/router/Topic'),
            name : 'Topic',
            meta : {
                isActive : false
            }
        },
    ]
})
export default router